<script setup>
import { onMounted, ref } from 'vue';

// vue2: this.$refs.h1Dom
/* 
模板中 ref 属性的使用
作用：获取dom/组件
1. 定义一个响应式的对象
2. 模板中通过 ref 的属性，绑定到对象
3. 页面渲染完成，对象.value 获取到 dom
*/

const h1Dom = ref(null);
console.log('setup -----> ', h1Dom.value);

onMounted(() => {
  console.log('onMounted -----> ', h1Dom.value);
  h1Dom.value.innerHTML = '我修改了h1';
});
</script>

<template>
  <h1 ref="h1Dom">Hello vue3</h1>
</template>
